<template>
    <div id="wangeditor">
        <div ref="editorElem" style="text-align: left"></div>
    </div>
</template>

<script>
import E from 'wangeditor';

export default {
    name: 'index',
    data() {
        return {
            editor: null,
            editorContent: ''
        };
    },
    // catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本修改器中的html内容用来传递给服务端
    props: ['catchData'], // 接收父组件的方法
    mounted() {
        this.editor = new E(this.$refs.editorElem);
        // 修改器的事件，每次改变会获取其html内容
        this.editor.config.onchange = html => {
            this.catchData(html); // 把这个html通过catchData的方法传入父组件
        };
        this.editor.config.menus = [
            // 菜单配置
            'head', // 标题
            'bold', // 粗体
            'fontSize', // 字号
            'fontName', // 字体
            'italic', // 斜体
            'underline', // 下划线
            'strikeThrough', // 删除线
            'foreColor', // 文字颜色
            'backColor', // 背景颜色
            'link', // 插入链接
            'list', // 列表
            'justify', // 对齐方式
            'quote', // 引用
            // 'emoticon',  // 表情
            'image', // 插入图片
            'table', // 表格
            'video', // 插入视频
            // 'code',  // 插入代码
            'undo', // 撤销
            'redo' // 重复
        ];
        this.editor.config.uploadImgShowBase64 = true; // 使用 base64 保存图片
        this.editor.config.uploadImgHooks = {
            success: function (xhr, editor, result) {
                console.log(11111111);
            },
            fail: function (xhr, editor, result) {
                // 图片上传并返回结果，但图片插入错误时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            error: function (xhr, editor) {
                // 图片上传出错时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            }
        };
        this.editor.create(); // 创建富文本实例
    },
    methods: {
        setData(html) {
            this.editor.txt.html(html);
        }
    }
};
</script>

<style>
table {
    width: 50%;
    height: 50%;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
table td,
table th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 3px 5px;
}
table th {
    background-color: #f1f1f1;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center;
}

/* blockquote 样式 */
blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
}

/* code 样式 */
code {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background-color: #f1f1f1;
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0 3px;
}
pre code {
    display: block;
}

/* ul ol 样式 */
ul,
ol {
    margin: 10px 0 10px 20px;
}
.w-e-menu {
    z-index: 2 !important;
}
.w-e-toolbar {
    z-index: 999 !important;
}
.w-e-text-container {
    z-index: 997 !important;
}
.w-e-text {
    z-index: 999;
}
</style>
